import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:palmf_hid/common/values/values.dart';
import 'package:palmf_hid/common/widgets/widgets.dart';
import 'package:palmf_hid/generated/assets.dart';
import 'login_logic.dart';

///登录页面
class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _HomePage();
}

class _HomePage extends State<LoginPage> {
  final logic = Get.put(LoginLogic());
  final state = Get.find<LoginLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Obx(() => _buildContainer());
  }

  _buildContainer() {
    return Container(
        padding: const EdgeInsets.only(left: 20.0, right: 20, top: 20),
        color: MyColor.account_color,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Image.asset(
              Assets.imagesLogoWhiteBg,
              width: 0.2.sw,
            ),
            const SizedBox(
              height: 10,
            ),
            const Text(
              "掌中快检平台软件系统",
              style: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: MyColor.c_FFFFFFFF,
                  fontSize: 20),
            ),
            const SizedBox(
              height: 50,
            ),
            SizedBox(
              width: 0.3.sw,
              child: _buildPhone(),
            ),
            const SizedBox(
              height: 10,
            ),
            SizedBox(width: 0.3.sw, child: _buildPsw()),
            const SizedBox(
              height: 10,
            ),
            const SizedBox(
              height: 10,
            ),
            SizedBox(width: 0.3.sw, child: _buildBtn()),
          ],
        ));
  }

  Widget _buildBtn() => Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          InkWell(
              onTap: () => logic.doLogIn(),
              child: Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                alignment: Alignment.center,
                height: 40,
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(5)),
                  gradient: LinearGradient(colors: [
                    Color(0xFF00A6B2),
                    Color(0xFF00A6B2),
                  ], begin: Alignment.centerLeft, end: Alignment.centerRight),
                ),
                child: const Text("确定",
                    style: TextStyle(color: Colors.white, fontSize: 16)),
              )),
        ],
      );

  _buildInputDecoration(Widget child) {
    return Container(
      width: 1.sw,
      height: 45,
      padding: const EdgeInsets.symmetric(horizontal: 15),
      decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(10))),
      child: child,
    );
  }

  ///用户名输入
  _buildPhone() {
    return _buildInputDecoration(Row(
      children: [
        const Text("用户名"),
        const SizedBox(
          width: 10,
        ),
        Expanded(
            child: inputTextEdit(
                keyboardType: TextInputType.text,
                maxLength: 20,
                hintText: "请输入用户名",
                focusNode: logic.phoneFocusNode,
                textInputAction: TextInputAction.next,
                controller: logic.phoneTextEditingController))
      ],
    ));
  }

//密码输入
  _buildPsw() {
    return _buildInputDecoration(Row(
      children: [
        Text("密   码"),
        const SizedBox(
          width: 10,
        ),
        Expanded(
            child: inputTextEdit(
                hintText: "请输入密码",
                isPassword: !state.showPwd,
                maxLength: 30,
                keyboardType: TextInputType.text,
                focusNode: logic.passwordFocusNode,
                textInputAction: TextInputAction.next,
                controller: logic.passwordController)),
        InkWell(
          child: Icon(
            state.showPwd ? Icons.visibility : Icons.visibility_off_sharp,
            color: Colors.grey,
            size: 18,
          ),
          onTap: () {
            state.showPwd = !state.showPwd;
          },
        )
      ],
    ));
  }

  @override
  void dispose() {
    Get.delete<LoginLogic>();
    super.dispose();
  }
}
